<template>
    <div class="home" id="home" name="home">
        <!-- 轮播图 -->
        <div class="block">
            <el-carousel height="460px">
                <el-carousel-item v-for="(item,index) in bannerData" :key="index">
                    <img :src="item.url" :alt="item.name">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 轮播图END -->
        <div class="main-box">
            <div class="main">
                <!-- 手机商品展示区域 -->
                <div class="phone">
                    <div class="box-hd">
                        <div class="title">手机</div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <router-link to>
                                <img src="http://47.115.85.237:3000/public/imgs/phone/phone.png" height="613px" alt="">
                            </router-link>
                        </div>
                        <div class="list">
                            <MyList :list="telephoneProducts" :more="true" :is_delete="false"></MyList>
                        </div>
                    </div>
                </div>
                <!-- 手机商品展示区域END -->
                <!-- 家电商品展示区域 -->
                <div class="appliance">
                    <div class="box-hd">
                        <div class="title">家电</div>
                          <div class="more">
                            <MyMenu :val="2" @receiveMenuVal="receiveHouseElectricalData">
                              <span slot="1">热门</span>
                              <span slot="2">电视影音</span>
                            </MyMenu>
                          </div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <ul>
                                <li>
                                  <img src="http://47.115.85.237:3000/public/imgs/appliance/appliance-promo1.png" alt="小米洗衣机">
                                </li>
                                <li>
                                  <img src="http://47.115.85.237:3000/public/imgs/appliance/appliance-promo2.png" alt="小米电视机">
                                </li>
                            </ul>
                        </div>
                        <div class="list">
                          <MyList :list="houseElectricalProducts" :more="true" :is_delete="false"></MyList>
                        </div>
                    </div>
                </div>
                <!-- 家电商品展示区域END -->

                <!-- 配件商品展示区域 -->
                <div class="accessory" id="promo-menu">
                    <div class="box-hd">
                        <div class="title">配件</div>
                        <div class="more" id="more">
                            <MyMenu :val="3" @receiveMenuVal="receivePartsData">
                                <span slot="1">热门</span>
                                <span slot="2">保护套</span>
                                <span slot="3">充电器</span>
                            </MyMenu>
                        </div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <ul>
                                <li>
                                  <img src="http://i1.mifile.cn/f/i/2019/aiteacher-wifi/specs/white.jpg?v2" alt="">
                                </li>
                                <li>
                                  <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1597046216.42447200.jpg" alt="">
                                </li>
                            </ul>
                        </div>
                        <div class="list">
                          <MyList :list="partsProducts" :more="true" :is_delete="false"></MyList>
                        </div>
                    </div>
                </div>
                <!-- 配件商品展示区域END -->

                <!-- 智能商品展示区域 -->
                <div class="accessory">
                    <div class="box-hd">
                        <div class="title">智能</div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <ul>
                                <li>
                                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1559728396.2634058.jpg" alt="米家智能">
                                </li>
                                <li>
                                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1548839084.47893777.jpg" alt="电动滑板车">
                                </li>
                            </ul>
                        </div>
                        <div class="list">
                            <MyList :list="intellectProducts" :more="true" :is_delete="false"></MyList>
                        </div>
                    </div>
                </div>
                <!-- 智能商品展示区域END -->
            </div>
        </div>
    </div>
</template>

<script>
    // 导入组件
    import MyList from "../components/MyList";
    import MyMenu from "../components/MyMenu";
    export default {
        name: "Home",
        data() {
            return {
              products_limit: 7, // 获取的栏目商品的显示个数
              // 获取栏目数据名称
              cate_name1: "手机",
              cate_name2: "家电",
              cate_name3: "智能",
              cate_name4: "配件",
              cate_name5: "电视影音",
              cate_name6: "保护套",
              cate_name7: "充电器",
              telephoneProducts: [],  // 手机对应商品数据
              houseElectricalProducts: [], // 家电对应商品数据
              intellectProducts: [], // 智能对应商品数据
              partsProducts: [], // 配件对应商品数据
              bannerData: [], // 轮播图数据
            }
        },
        methods: {
          // 获取手机栏目数据
          getTelephoneProducts() {
            this.getProductsDataByCateName(this.cate_name1, (res) => {
              let result = res.data;
              if (result.status == 2001 && result.message == "请求成功") {
                this.telephoneProducts = result.data.products;
              }
            });
          },
          // 获取家电栏目数据
          getHouseElectricalProducts() {
            this.getProductsDataByCateName(this.cate_name2, (res) => {
              let result = res.data;
              if (result.status == 2001 && result.message == "请求成功") {
                this.houseElectricalProducts = result.data.products;
              }
            })
          },
          // 获取智能栏目数据
          getIntellectProducts() {
            this.getProductsDataByCateName(this.cate_name3, (res) => {
              let result = res.data;
              if (result.status == 2001 && result.message == "请求成功") {
                this.intellectProducts = result.data.products;
              }
            });
          },
          // 获取配件栏目数据
          getPartsProducts() {
            this.getProductsDataByCateName(this.cate_name4, (res) => {
              let result = res.data;
              if (result.status == 2001 && result.message == "请求成功") {
                this.partsProducts = result.data.products;
              }
            });
          },
          // 接收子组件传过来的家电响应数据 1表示(家电初始)热门数据 2表示电视影音数据
          receiveHouseElectricalData(val) {
            if (val == 1) {
              // 初始家电数据
              this.getHouseElectricalProducts();
            }
            else {
              // 电视影音数据
              this.getProductsDataByCateName(this.cate_name5, res => {
                let result = res.data;
                if (result.status == 2001 && result.message == "请求成功") {
                  this.houseElectricalProducts = result.data.products;
                }
              })
            }
          },
          // 接收子组件传过来的配件响应数据 1初始数据 2.保护套数据 3.充电器数据
          receivePartsData(val) {
            switch (val) {
              case 1: this.getPartsProducts()  // 初始数据
              break;
              case 2: // 保护套
                this.getProductsDataByCateName(this.cate_name6, res => {
                  let result = res.data;
                  if (result.status == 2001 && result.message == "请求成功") {
                    this.partsProducts = result.data.products;
                  }
                })
              break;
              case 3:
                this.getProductsDataByCateName(this.cate_name7, res => {
                  let result = res.data;
                  if (result.status == 2001 && result.message == "请求成功") {
                    this.partsProducts = result.data.products;
                  }
                })
              break;
            }
          },
          // 通过栏目名称获取对应商品数据,全局方法
          getProductsDataByCateName($cate_name, callback) {
            this.$axios.get(this.baseUrl
              + '/api/v1/products/' + $cate_name + '?limit=' + this.products_limit)
              .then(response => {
                callback(response);
              })
              .catch(error => {
                console.log(error);
              })
          },
          // 获取轮播图数据
          getBannerData() {
            this.$axios.get(this.baseUrl + '/api/v1/user/slides')
                .then(response => {
                    if (response.status == 200) {
                        this.bannerData = response.data.data;
                    }
                })
                .catch(error => {
                    console.log(error.response)
                })
          }
        },
        created() {
          this.getTelephoneProducts();
          this.getHouseElectricalProducts();
          this.getIntellectProducts();
          this.getPartsProducts();
          this.getBannerData();
        },
        components: {
            MyList,
            MyMenu
          }

    }
</script>

<style scoped>
    @import "../assets/css/index.css";
</style>
